<template>
  <div class="login-page-layout">
    <div class="heading">
      <div class="title">
        <div class="text">登录</div>
        <div class="dot"></div>
      </div>

      <div class="welcome">欢迎来到海豚教育</div>
    </div>

    <div class="login-form">
      <keep-alive>
        <component ref="loginForm" :is="loginForm" />
      </keep-alive>
    </div>

    <div>
      <van-button
        round
        size="large"
        color="#4586FF"
        :loading="loginBtn"
        :disabled="loginBtn"
        @click="login"
      >登录</van-button>
    </div>

    <div class="others">
      <div @click="toRegister">新用户注册 ></div>
      <div @click="toForget">忘记密码</div>
    </div>

    <div class="login-mode">
      <van-divider :style="{ color: '#CFD4DE', borderColor: '#CFD4DE' }">其他登录方式</van-divider>
      <div class="content" :style="{ justifyContent: isWechat ? 'space-between' : 'center' }">
        <div v-if="isWechat" class="grid">
          <div>
            <div class="icon wechat">
              <img src="@/assets/icons/wechat.png" alt />
            </div>
            <div class="name">微信授权登录</div>
          </div>
        </div>

        <div class="grid" @click="switchTab">
          <div>
            <div class="icon another">
              <img src="@/assets/icons/shield.png" alt />
            </div>
            <div class="name">{{ loginForm | swapText }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters, mapActions } from 'vuex'
import { Button, Divider } from 'vant'
import CaptchaForm from './CaptchaForm'
import PasswordForm from './PasswordForm'

Vue.use(Divider).use(Button)

export default {
  components: {
    CaptchaForm,
    PasswordForm
  },

  filters: {
    swapText: val => {
      return val === 'CaptchaForm' ? '手机号密码登录' : '短信验证码登录'
    }
  },

  data() {
    return {
      loginForm: 'CaptchaForm',
      loginBtn: false
    }
  },

  computed: {
    ...mapGetters(['browser']),

    isWechat() {
      return this.browser.toLowerCase().indexOf('micromessenger') > -1
    }
  },

  methods: {
    ...mapActions({
      Login: 'user/Login'
    }),

    switchTab() {
      this.loginForm =
        this.loginForm === 'CaptchaForm' ? 'PasswordForm' : 'CaptchaForm'
    },

    login() {
      const { Login, $router, $route } = this
      const form = this.$refs.loginForm
      form.validate().then(async value => {
        this.loginBtn = true
        Login(value).then(() => {
          const redirect = decodeURIComponent($route.query.redirect || '/')
          $router.push({ path: redirect })
        })
      })
    },

    toRegister() {
      this.$router.push({
        name: 'register'
      })
    },

    toForget() {
      this.$router.push({
        name: 'forget'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login-page-layout {
  .heading {
    .title {
      position: relative;
      text-align: center;
      color: #222222;

      .text {
        position: relative;
        font-size: 21px;
        line-height: 21px;
        font-weight: 500;
        width: 53px;
        z-index: 1;
      }

      .dot {
        position: absolute;
        background-color: #4586ff;
        width: 53px;
        height: 9px;
        bottom: -1px;
        z-index: 0;
      }
    }

    .welcome {
      margin-top: 7px;
      line-height: 29.5px;
      font-size: 21px;
      font-weight: 500;
      color: #222222;
    }
  }

  .login-form {
    margin-top: 90px;
    margin-bottom: 40px;
  }

  .others {
    color: #bbbbbb;
    justify-content: space-between;
    display: flex;
    font-size: 12px;
    font-weight: 500;
    margin-top: 30px;
  }

  .login-mode {
    margin-top: 90px;

    .content {
      margin-top: 35px;
      padding: 0 10%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .grid {
        text-align: center;

        .icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: auto;
          color: #ffffff;
        }

        img {
          width: 34px;
        }

        .wechat {
          background: linear-gradient(to bottom, #00d701, #00ba00);
        }

        .another {
          background: linear-gradient(to bottom, #4586ff, #1868ff);
        }

        .name {
          font-size: 13px;
          color: #cfd4de;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
